<template>
  <div>
    <h2 class="r_title">
      区校导入
    </h2>
    <div class="p20">
      <div class="row">
        <el-select v-model="importType" filterable>
          <el-option label="区导入" value="区导入"/>
          <el-option label="校导入" value="校导入"/>
        </el-select>
        <el-upload action="" class="ml20" ref="upload" :file-list="fileList" :auto-upload="false" :show-file-list="false" :limit="1" accept=".xlsx">
          <el-button slot="trigger" type="primary" @click="$refs['upload'].clearFiles()">上传</el-button>
        </el-upload>
        <el-button class="ml20" icon="el-icon-upload" :loading="loading" @click="submitCheck">导入检查</el-button>
        <el-button class="ml20" icon="el-icon-download">区导入模板下载</el-button>
        <el-button class="ml20" icon="el-icon-download">校导入模板下载</el-button>
        <div class="right">
          <el-button type="primary" @click="submitImport" :loading="loading">确认导入</el-button>
        </div>
      </div>
      <div class="bod mt20">
        <el-table ref="table_container" :data="errData" stripe style="width: 100%" :height="tableHeight" v-loading="loading" header-cell-class-name="table-header-cell" cell-class-name="table-cell">
          <el-table-column prop="at" label="错误位置" align="center"></el-table-column>
          <el-table-column prop="reason" label="错误原因" align="center"></el-table-column>
        </el-table>
      </div>
    </div>
    <el-dialog :title="resultDialog.title" :visible.sync="resultDialog.show" width="300px">
      <div class="center">
        <i v-if="resultDialog.result" class="el-icon-success success-icon"></i>
        <i v-else class="el-icon-error error-icon"></i>
      </div>
      <div class="flex-center mt20">
        <div class="result-text center">
          <span>新增数据</span>
          <span>{{resultDialog.insert}}</span>
        </div>
      </div>
      <div class="flex-center mt5">
        <div class="result-text center">
          <span>更新数据</span>
          <span>{{resultDialog.update}}</span>
        </div>
      </div>
      <div class="flex-center mt5">
        <div class="result-text center">
          <span>导入是否有错误</span>
          <span v-if="!resultDialog.result" style="color:#F56C6C">是</span>
          <span v-else style="color:#67C23A">否</span>
        </div>
      </div>
      <div class="center mt20">
        <el-button type="primary" @click="resultDialog.show=false">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { areaImportCheck, schoolImportCheck, areaImport, schoolImport } from '../../api/import'
export default {
  name: 'district-school-import',
  mounted () {
    this.$store.dispatch('setRoute', this.$route.path)
    setTimeout(this.reInitTableHeight, 100)
  },
  data () {
    return {
      importType: '区导入',
      errData: [],
      tableHeight: '0px',
      fileList: [],
      loading: false,
      resultDialog: {
        show: false,
        result: '',
        insert: '',
        update: '',
        title: ''
      }
    }
  },
  methods: {
    submitImport () {
      if (this.$refs['upload'].uploadFiles.length === 0 || this.$refs['upload'].uploadFiles[0].raw.type !== 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet') {
        this.$message.error('请选择正确的文件')
        return
      }
      if (this.importType === '区导入') {
        this.loading = true
        areaImport(this.$refs['upload'].uploadFiles[0].raw).then((res) => {
          this.loading = false
          this.resultDialog.result = res.data.result
          this.resultDialog.insert = res.data.insert
          this.resultDialog.update = res.data.update
          this.resultDialog.title = '导入结果'
          this.errData = res.data.errorMsg
          this.resultDialog.show = true
        })
      } else if (this.importType === '校导入') {
        this.loading = true
        schoolImport(this.$refs['upload'].uploadFiles[0].raw).then((res) => {
          this.loading = false
          this.resultDialog.result = res.data.result
          this.resultDialog.insert = res.data.insert
          this.resultDialog.update = res.data.update
          this.resultDialog.title = '导入结果'
          this.errData = res.data.errorMsg
          this.resultDialog.show = true
        })
      }
    },
    submitCheck () {
      if (this.$refs['upload'].uploadFiles.length === 0 || this.$refs['upload'].uploadFiles[0].raw.type !== 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet') {
        this.$message.error('请选择正确的文件')
        return
      }
      if (this.importType === '区导入') {
        this.loading = true
        areaImportCheck(this.$refs['upload'].uploadFiles[0].raw).then((res) => {
          this.loading = false
          this.resultDialog.result = res.data.result
          this.resultDialog.insert = res.data.insert
          this.resultDialog.update = res.data.update
          this.resultDialog.title = '检查结果'
          this.errData = res.data.errorMsg
          this.resultDialog.show = true
        })
      } else if (this.importType === '校导入') {
        this.loading = true
        schoolImportCheck(this.$refs['upload'].uploadFiles[0].raw).then((res) => {
          this.loading = false
          this.resultDialog.result = res.data.result
          this.resultDialog.insert = res.data.insert
          this.resultDialog.update = res.data.update
          this.resultDialog.title = '检查结果'
          this.errData = res.data.errorMsg
          this.resultDialog.show = true
        })
      }
    },
    reInitTableHeight () {
      if (document.documentElement.clientHeight - 40 - this.$refs['table_container'].$el.offsetTop < 0) {
        setTimeout(this.reInitTableHeight, 10)
      } else if (document.documentElement.clientHeight - 40 - this.$refs['table_container'].$el.offsetTop <= 500) {
        this.tableHeight = '500px'
      } else {
        this.tableHeight = document.documentElement.clientHeight - 40 - this.$refs['table_container'].$el.offsetTop + 'px'
      }
    }
  },
  computed: {
    ...mapGetters([
      'height'
    ])
  },
  watch: {
    height: function (val) {
      this.reInitTableHeight()
    }
  }
}
</script>

<style scoped>
  @import "../../styles/common.css";
.right {
  display: flex;
  justify-content: flex-end;
  flex-grow:1;
}
  .success-icon {
    font-size: 50px;
    color: #67C23A;
  }
  .error-icon {
    font-size: 50px;
    color: #F56C6C;
  }
  .center {
    text-align: center;
  }
  .result-text {
    display: flex;
    justify-content: space-between;
    width: 200px;
  }
  .flex-center {
    display: flex;
    justify-content: center;
  }
</style>
